<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>

<%@ taglib uri="/WEB-INF/hexacta.tld" prefix="hexacta"%>

<s:include value="errorsSection.jsp"></s:include>

<link type="text/css"
	href="/hrs-intranet/js/jquery/css/ui-lightness/jquery-ui-1.8.16.custom.css"
	rel="stylesheet" />
<script type="text/javascript"
	src="/hrs-intranet/js/jquery/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript"
	src="/hrs-intranet/js/jquery/js/jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript"
	src="/hrs-intranet/js/cluetip/jquery.cluetip.js"></script>
<link type="text/css" href="/hrs-intranet/js/cluetip/jquery.cluetip.css"
	rel="stylesheet" />
	
<head>
<sx:head cache="true" />
<link rel="stylesheet" href="/hrs-intranet/styles/displaytag.css"
	type="text/css" />
</head>

<script type="text/javascript">
	function clickOK() {
		document.getElementById('okbtn').click();
	}

	function Func1Delay()
	{
		setTimeout("clickOK()", 100);
	}

	function confirmRemove( url )
	{
		if ( confirm("You are about to remove a client. Are you sure you want to continue?") )
		{
			document.forms[0].action = url;
	  		document.forms[0].submit();
		}
	}
</script>

<script type="text/javascript">
	function setEdit(clientList, clientListId, location, locationId, employeeEdit, employeeEditId, internal ){
		document.getElementById("selectedClientForEdit").value = clientListId;
		
		var clientAutoCompleter = dojo.widget.byId("client_list");
		clientAutoCompleter.setAllValues(clientList, clientListId);
		
		var locationAutoCompleter = dojo.widget.byId("location_edit");
		locationAutoCompleter.setAllValues(location, locationId);
		
		var employeeAutoCompleter = dojo.widget.byId("employee_edit");
		employeeAutoCompleter.setAllValues(employeeEdit, employeeEditId);		
		
		if(internal == "true"){
			document.getElementById('internal_edit').checked = true;	
		}
		
	}
	
</script>

<script type="text/javascript">
	function showDialog(id) {
		$(id).dialog('open');
		return false;
	}
	
	$(document).ready(function() {

		// Dialog			
		$("div[id^='dialog']").dialog({
			autoOpen : false,
			modal : true,
			draggable : false,
			resizable : false,
			width : 500,
			closeText: 'hide',
			height : 'auto',
			zIndex:0,
			hide: { effect: 'drop', direction: "down" },
			show: { effect: 'drop', direction: "up" },
			open: function(event, ui) {
				$(".ui-dialog-titlebar").hide();
                $(".ui-dialog-titlebar-close").hide();
    			}
		});
		
		// 				$("div[id^='dialog']").dialog('widget').find(
		// 						".ui-dialog-titlebar").hide();
		
	});
	

</script>

<s:form cssClass="formClass">
	<sx:autocompleter list="allClientList" listValue="name"
		searchType="startword" listKey="id" showDownArrow="false"
		keyName="selectedClientId" name="selectedClientName"
		label="Client Name" />

	<sx:autocompleter list="locationList" label="Client Location"
		showDownArrow="false" searchType="startword" name="selectedLocation"
		forceValidOption="false" listKey="id" keyName="selectedLocationId"
		name="selectedLocationName" listValue="name"/>


	<sx:autocompleter list="employeeList" listValue="person.name"
		searchType="startword" listKey="id" showDownArrow="false"
		keyName="selectedEmployeeId" name="selectedEmployeeName"
		label="Manager / Partner in Charge" />
		
	<s:checkbox name="selectedInternal" label="Internal" />

	<table width="36%">
		<tr>
			<td width="50%" align="right"><table><s:reset type="reset" key="Reset" cssClass="btn" onclick="Func1Delay()" /></table></td>
			<td width="50%" align="left"><table><s:submit action="ClientAction_filterClients" key="Filter" cssClass="btn" id="okbtn" /></table> </td>
		</tr>
	</table>

	<table width="90%">
		<tr>
			<td align="right"><s:a cssClass="Add" href="#" id="dialog_link"
					onclick="javascript: return showDialog('#dialogClient');">Add Client</s:a>
			</td>
		</tr>
		<tr>
			<td><display:table id="clientList" name="clientList"
					defaultsort="1" defaultorder="ascending"
					requestURI="ClientAction_filterClients" class="listable"
					cellpadding="0" cellspacing="0" pagesize="10">
					<display:column property="name" title="Client Name" sortable="true" />
					<s:if test="%{!clientList.isEmpty()}">
						<display:column
							value="${(clientList.internal)? 'Internal' : 'External'}"
							title="Client Type" sortable="true" />
						<display:column property="location.name" title="Location"
							sortable="true" />
					</s:if>
					<display:column property="employeeInCharge.person.name"
						title="Manager / Partner in Charge" sortable="true" />
					<s:url var="delete_action" action="ClientAction_deleteClient"
						namespace="/hrs2" />
					<s:url var="edit_action" action="ClientAction_editClient"
						namespace="/hrs2" />
					<display:column title="options">
						<s:if
							test="hasPermission(permissionNameConverter.getEditClientPermission())">
							<s:a href="#" id="dialog_link"
					onclick="javascript: setEdit('%{#attr.clientList.name}', '%{#attr.clientList.id}', '%{#attr.clientList.location.name}', '%{#attr.clientList.location.id}', '%{#attr.clientList.employeeInCharge.person.name}', '%{#attr.clientList.employeeInCharge.id}' , '%{#attr.clientList.internal}' ); return showDialog('#dialogEdit');">Edit</s:a>&nbsp;&nbsp;&nbsp;
					<!-- cssClass="Add" -->
			</s:if>
						<s:if
							test="hasPermission(permissionNameConverter.getRemoveClientPermission())">
							<a
								href="javascript:confirmRemove('${delete_action}?selectedClientForRemove=${clientList.id}')">Remove</a>
						</s:if>
					</display:column>
				</display:table></td>
		</tr>
	</table>
</s:form>


<div id="dialogClient">
	<h2>Create New Client</h2>
	<div>
		<s:form cssClass="formClass">
			<sx:autocompleter searchType="startword" showDownArrow="false"
				autoComplete="false" name="selectedClientName" label="Client Name" />

			<sx:autocompleter list="locationList" label="Client Location"
				showDownArrow="false" searchType="startword" name="selectedLocation"
				forceValidOption="false" listKey="id" keyName="selectedLocationId"
				name="selectedLocationName" listValue="name" />

			<sx:autocompleter list="employeeList" listValue="person.name"
				searchType="startword" listKey="id" showDownArrow="false"
				keyName="selectedEmployeeId" name="selectedEmployeeName"
				label="Manager / Partner in Charge" />

			<s:checkbox name="selectedInternal" label="Internal" />
			
			<table>
				<tr>
					<td width="50%" align="right"><table><s:submit action="ClientAction_saveClient" key="Ok" cssClass="btn" id="okbtn" /></table></td>
					<td width="50%" align="left"><table><tr><td><input type="button" value="Cancel" class="btn" onclick="$('#dialogClient').dialog('close');" /></td></tr></table></td>
			</tr>
			</table>	
		</s:form>
	</div>
</div>


<div id="dialogEdit">
	<h2>Edit Client</h2>
	<div>
		<s:form cssClass="formClass">
			<s:hidden name="selectedClientForEdit" id="selectedClientForEdit" />
			<sx:autocompleter id="client_list" searchType="startword" showDownArrow="false"
				autoComplete="false" name="selectedClientName" label="Client Name" />

			<sx:autocompleter id="location_edit" list="locationList" label="Client Location"
				showDownArrow="false" searchType="startword" name="selectedLocation"
				forceValidOption="false" listKey="id" keyName="selectedLocationId"
				name="selectedLocationName" listValue="name" />

			<sx:autocompleter id="employee_edit" list="employeeList" listValue="person.name"
				searchType="startword" listKey="id" showDownArrow="false"
				keyName="selectedEmployeeId" name="selectedEmployeeName"
				label="Manager / Partner in Charge" />

			<s:checkbox id="internal_edit" name="selectedInternal" label="Internal" />
			
			<table>
				<tr>
					<td width="50%" align="right"><table><s:submit action="ClientAction_saveClient" key="Ok" cssClass="btn" id="okbtn" /></table></td>
					<td width="50%" align="left"><table><tr><td><input type="button" value="Cancel" class="btn" onclick="$('#dialogEdit').dialog('close');" /></td></tr></table></td>
			</tr>
			</table>	
		</s:form>
	</div>
</div>
